<template>
	<div id="login-container" class="login-wrap">
		<div class="ms-title">
			<div style="position:relative;width: 460px;margin: 0 auto;left: 16%;">
				远程写卡--管理控制台
				<!-- <span style="display:inline-block;margin-left:21px;">系统维护管理控制台</span> -->
			</div> 
		</div>
		<div class="ms-login" style="width:384px;">
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm">
				<el-form-item prop="username">
					<el-input v-model="ruleForm.username" placeholder="输入用户名或手机号"></el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input type="password" placeholder="输入6-20位有效密码" v-model="ruleForm.password" @keyup.enter.native="submitForm('ruleForm')"></el-input>
				</el-form-item>
				<el-form-item>
					<el-col :span="12">
						<el-form-item prop="captcha">
							<el-input type="v" placeholder="输入验证码" v-model="ruleForm.captcha" @keyup.enter.native="submitForm('ruleForm')"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="1">&nbsp;</el-col>
					<el-col :span="11">
						<!-- <img :src="require('assets/image/verifycode.png')" style="width:100%;height: 32px;border-radius: 4px" alt=""> -->
						<img :src="verifycodeurl" style="width:100%;height: 32px;border-radius: 4px" @click="getverifycode" />
					</el-col>
				</el-form-item>
				<div class="login-btn">
					<el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
				</div>
				<p style="font-size:12px;line-height:30px;color: #fff;text-align: center;margin-top: 10px;">Tips:请使用google浏览器通过用户名或手机号和密码登录</p>
			</el-form>
		</div>
	</div>
</template>

<script>
import crypt from 'common/crypt.js'
export default {
	data: function () {
		// var validatePass = (rule, value, callback) => {
		// 	var zg =  new RegExp('(?=.*[0-9])(?=.*[a-zA-Z]).{6,20}'); 
		// 	if (!zg.test(value) || Number(value) < 1) {
		// 		callback(new Error("密码中必须包含字母、数字，长度6-20"));
		// 	} else {
		// 		callback();
		// 	}
		// }
		return {
			ruleForm: {
				username: "",
				password: "",
				pass:"",
				captchaid: "",
				captcha: "",
				apptype: "20"
			},
			// 加载用户数据加载框标识
			loading: false,
			rules: {
				username: [
					{
						required: true,
						message: "请输入用户名或手机号",
						trigger: "blur"
					}
				],
        		// password: [{ required: true, validator: validatePass, trigger: "blur" }],
        		password: [{ required: true, message: "输入6-20位有效密码", trigger: "blur" }],
				captcha: [
					{
						required: true,
						message: "请输入验证码",
						trigger: "blur"
					}
				]
			},
			verifycodeurl: ""
		};
	},
	// 登录页面还未进入keep-alive router，故此处需用mounted控制
	mounted: function () {
		this.getverifycode();
	},
	methods: {
		submitForm(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					this.$set(this.ruleForm, "pass", crypt(this.ruleForm.password));
					this.$axios
						.post(this.httpRoot.BASEURL_UIM + "rest/uim/frame/frmuser/login", this.ruleForm)
						.then(res => {  
							if (res.data.result == "true") { 
								this.$store
									.dispatch("user/cacheLoginer", res.data.resultData)
									.then(() => {
										this.$router.push({
											path:"/home",
										});
									})
									.catch(() => { });
								return true;
							} else {
								this.$error("登录失败" + res.data.resultMessage);
							}
						})
						.catch(function (error) {
							console.log(error);
						});
				} else {
					console.log("error submit!!");
					return false;
				}
			});
		},
		getverifycode: function () {
			this.ruleForm.captchaid =
				new Date().getTime() + "" + Math.floor(Math.random() * 10000);
			this.verifycodeurl =
				this.httpRoot.BASEURL_UIM +
				"rest/uim/frame/frmuser/verifycode/" +
				this.ruleForm.captchaid;
		}
	}
};

</script>

<style scoped>
.login-wrap {
  background: url(./images/login-bg.jpg) no-repeat;
  /* background-color: aquamarine; */
  position: relative;
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
}

.ms-title {
  position: absolute;
  top: 50%;
  width: 100%;
  margin-top: -230px;
  text-align: center;
  font-size: 30px;
  color: #fff;
}

.ms-login {
  position: absolute;
  right: 20%;
  top: 50%;
  width: 380px;
  height: 240px;
  margin: -150px 0 0 -190px;
  padding: 40px;
  border-radius: 5px;
  /* background: #fff; */
}

.login-btn {
  text-align: center;
}

.login-btn button {
  width: 100%;
  height: 36px;
}
</style>
